@charset "utf-8";

div{
	width: 200px;
	height: 200px;
	background-color: white;
	border: solid 1px green;

	/* 调用 @keyframes 动画，还需要设置播放时间才能奏效 */
	/*animation-name: firanimation;*/
	/* 设置播放时间 */
	/*animation-duration: 1s;*/
	/* 设置缓动 */
	/*animation-timing-function: ease-out;*/
	/* 设置延迟时间 */
	/*animation-delay: 1s;*/
	/* 设置循环次数 */
	/*animation-iteration-count: 5;*/
	/* 设置动画方向的交替 */
	/*animation-direction: alternate;*/
	/* 设置停止播放动画 */
	/*animation-play-state: paused;*/

	/* 设置结束后的不返回 */
	/*animation-fill-mode: forwards;*/
	/* 设置结束后迅速应用起始位置，即返回 */
	/*animation-fill-mode: backforwards;*/
	/* 根据情况产生forwards 或 backforwards 效果 */
	/*animation-fill-mode: both;*/


	/* 简写与兼容形式 
	 * 语法：
	 *	animation: name duration timing-function delay iteration-count direction;
	*/
	-webkit-animation: firanimation 1s ease-out 2s 2 normal;
	-moz-animation: firanimation 1s ease-out 2s 2 normal ;
	-ms-animation: firanimation 1s ease-out 2s 2 normal;
	animation: firanimation 1s ease-out 2s 2 normal;
}

/******************************** 声明一个动画关键帧，版本兼容
* @-web-keyframes name{ ... }
* @-moz-keyframes name{ ... }
* @-o-keyframes name{ ... }
* @-ms-keyframes name{ ... }
* @keyframes name{ ... }
********************************/
/* 第一种方法：通过关键帧的方式，这里插入三个关键帧。0% 表示动画开始时，100%表示动画结束时。这种方法是用百分比 */
@keyframes firanimation {
	/*0%, 100%{
		background-color: white;
		margin-left: 0px;
	}
	50%{
		background-color: black;
		margin-left: 100px;
	}*/
}
/* 第二种方法：从什么状态过渡到什么状态 */
@keyframes firanimation {
	from{
		background-color: white;
		margin-left: 0px;
	}
	to{
		background-color: black;
		margin-left: 100px;
	}
}